<template>
   <!-- 定义页面的通用布局 -->
  <div class="common-layout">
    <div>
      <!-- 页眉部分，固定在顶部，包含面包屑导航和用户相关的按钮 -->
      <div
        class="common-layout-header fixed z-10 left-0 top-0 right-0 pl-[18rem] pt-8 h-24 flex justify-between items-center text-black px-8"
      >
      <!-- 面包屑导航 -->
        <div
          class="h-14 flex flex-col justify-center pl-4 text-black dark:text-white"
        >
        <!-- 使用 el-breadcrumb 组件来展示面包屑导航 -->
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item
              v-for="(item, index) in BCNList"
              :key="index"
              class="cursor-pointer text-[0.7rem] font-medium"
              >{{ item }}</el-breadcrumb-item
            >
          </el-breadcrumb>
          <!-- 页面标题 -->
          <div class="mt-2 text-xl font-bold">{{ BCNList[0] }}</div>
        </div>

        <!-- 用户相关的按钮，如退出登录和主题切换 -->
        <div class="flex items-center gap-4">
          <!-- 退出登录按钮 -->
          <el-button
            link
            @click="logout"
            class="text-black dark:text-white font-bold flex items-center gap-4 text-sm"
          >
            <el-icon><UserFilled /></el-icon>
            <span>退出登录</span>
          </el-button>
          <!-- 夜间模式切换按钮 -->
          <el-button
            link
            @click="darkModeSwitch"
            class="text-black dark:text-white font-bold flex items-center gap-4 text-sm dark:hidden"
          >
            <el-icon><MoonNight /></el-icon>
            <span>夜间模式</span>
          </el-button>
          <!-- 日间模式切换按钮 -->
          <el-button
            link
            @click="darkModeSwitch"
            class="text-black dark:text-white font-bold items-center gap-4 text-sm hidden dark:flex"
          >
            <el-icon><Sunset /></el-icon>
            <span>日间模式</span>
          </el-button>
        </div>
      </div>
      <!-- 侧边栏和页面主要内容区域 -->
      <div class="min-h-[100vh]">
        <!-- 侧边栏组件 -->
        <div class="fixed z-20 left-0 bottom-0 top-0 w-[18rem] p-6 pt-8">
          <SideBar class="w-full" />
        </div>
        <!-- 主要内容区域，使用 slot 来插入其他组件 -->
        <div
          class="fixed top-28 left-0 right-0 bottom-0 overflow-y-auto pl-[19rem] pr-8"
        >
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
// 导入 SideBar 组件和其他依赖
import SideBar from "./SideBar.vue";
import { useRoute, useRouter } from "vue-router";
import { computed, nextTick, onMounted, ref } from "vue";
import {
  ArrowRight,
  UserFilled,
  MoonNight,
  Sunset,
} from "@element-plus/icons-vue";
// 导入 SideBar 组件和其他依赖
import JwtService, { destroyToken } from "@/core/services/JwtService.js";
import { darkModeSwitch } from "@/core/utils/darkModeSwitch.js";
import { useStuIdStore } from "@/stores/stuIdStore";

// 创建状态存储实例
const stuIdStore = useStuIdStore();
const route = useRoute();
const router = useRouter();
const BCNList = ref([]);
// 从路由元信息中获取面包屑导航列表
const getBCN = () => {
  const BCNString = route.meta.BCN;
  if (BCNString) {
    const arr = BCNString.split("-");
    BCNList.value.splice(0, BCNList.value.length, ...arr);
  }
};

// 退出登录的函数
const logout = () => {
  // 清除用户角色信息、Token 并重定向到登录页面
  localStorage.removeItem("userRole"); 
  JwtService.destroyToken();
  stuIdStore.clearStuId();
  router.push({ name: "login" });
};
// 路由变化后更新面包屑导航
router.afterEach((to, from) => {
  getBCN();
});
onMounted(() => {
  // 组件挂载后初始化面包屑导航
  getBCN();
});
</script>
<style lang="scss">
// 定义 SCSS 样式，覆盖 Element Plus 组件默认样式
//.common-layout {
//  background: #ffffff url("@/assets/background.jpg") no-repeat right top / 50% auto fixed;
//}
//.common-layout-header {
//  background: #ffffff url("@/assets/background.jpg") no-repeat right top / 50% auto fixed;
//}
.el-breadcrumb__inner,
.el-breadcrumb__separator {
  color: inherit !important;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  color: inherit !important;
}
</style>
